<template>
    <div class="content">
        <van-nav-bar title="产品内容" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="content-box" v-for="(item, index) in conlist.data">
            <div class="content-img" @click="addImg">
                <img :src="item.img" alt="" srcset="">
            </div>
            <div class="content-title">
                <div class="content-word">
                    <h5>{{ item.sign }}</h5>
                    <h4>{{ item.name }} {{ item.temp }}</h4>
                    <p>{{ item.text }}</p>
                </div>
            </div>
        </div>
        <div class="content-like">
            <h3>猜你喜欢</h3>
            <div class="like-list">
                <ul>
                    <li>
                        <div class="like-img">
                            <img src="../static/images/list2.jpg" alt="" srcset="">
                        </div>
                        <h4>焦糖玛奇朵</h4>
                    </li>
                    <li>
                        <div class="like-img">
                            <img src="../static/images/list3.jpg" alt="" srcset="">
                        </div>
                        <h4>摩卡可可碎片星冰乐</h4>
                    </li>
                    <li>
                        <div class="like-img">
                            <img src="../static/images/list4.jpg" alt="" srcset="">
                        </div>
                        <h4>焦糖浓缩咖啡星冰乐</h4>
                    </li>
                    <li>
                        <div class="like-img">
                            <img src="../static/images/list5.jpg" alt="" srcset="">
                        </div>
                        <h4>香草拿铁</h4>
                    </li>
                    <li>
                        <div class="like-img">
                            <img src="../static/images/list6.jpg" alt="" srcset="">
                        </div>
                        <h4>冰摇柚柚蜂蜜红茶</h4>
                    </li>
                </ul>
            </div>
        </div>
    </div>>
</template>
<style lang="scss">
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";

.content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #fff;

    .content-img {
        width: 11rem;
        height: 11rem;
        margin: 0 auto;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .content-title {
        width: 100%;
        height: 9.5rem;
        background-color: #fafafa;
        overflow: hidden;

        .content-word {
            width: 90%;
            margin: 1.3333rem auto;

            h5 {
                color: #d6c78a;
                font-size: 12.4px;
            }

            h4 {
                font-size: 18px;
                margin: .6rem auto;
            }

            p {
                font-size: 13.5px;
                line-height: 1.6;
            }
        }
    }

    .content-like {
        width: 100%;
        height: 20rem;
        background-color: #f7f7f7;
        overflow: hidden;

        h3 {
            margin-top: 1.5rem;
            padding-left: .8rem;
            width: 7rem;
            border-left: 3px solid $backGroundColor;
        }

        .like-list {
            width: 100%;
            height: 13.3333rem;
            margin-top: 1.3333rem;
            // margin-left: 3rem;
            overflow-x: scroll;

            ul {
                width: 200%;
                display: flex;

                li {
                    // width: 100%;
                    width: 6rem;
                    height: 8rem;
                    text-align: center;
                    margin-left: 1rem;

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 100%;
                        box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.12);
                    }

                    h4 {
                        margin-top: .5333rem;
                        color: #242424;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
</style>
<script lang="ts" setup>
import { reactive, ref, defineComponent, onMounted, computed, onBeforeMount } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { getConList } from '../request';
import { showImagePreview } from 'vant';
const router = useRouter();
const route = useRoute();
let conId = route.query.id;
// console.log('aa', conId);

let conlist: any = reactive({
    data: []
})
getConList({ con_id: conId }).then((content: any) => {

    let { result } = content;
    let hot = result.map((item: any) => {
        let obj: any = {};
        obj.id = item.con_id;
        obj.name = item.con_name;
        obj.img = item.con_img;
        obj.text = item.con_text;
        obj.sign = item.con_sign;
        obj.temp = item.con_temp;
        return obj
    })
    conlist.data = hot;
})
    .catch(err => {
        console.log(err);

    })

const addImg = () => {
    showImagePreview({
        images: [
            conlist.data[0].img
        ],
        closeable: true,
    });
}

const onClickLeft = () => history.back();


</script>